<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/js/axios.js" ></script>
    <script tsrc="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>视频详情</title>
</head>

<style>
    #head {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 100;
    }

    #app_div1{
        /* border: 1px solid red; */
        margin-top: 80px;
        display: flex;
        justify-content: center;
    }

    #app_div1_div1{
        width: 50%;
        /* border: 1px solid red; */
        min-height: 100px;
    }

    #app_div1_div1_div1{
        /* border: 1px solid red; */
        min-height: 80px;
        width: 100%;
    }

    #app_div1_div1_div1_div1{
        /* border: 1px solid red; */
        height: 30px;
        width: 100%;
        font-size: 18px;
        font-weight: 500;
        color: #212121;
        display: flex;
        align-items: center;
    }

    #app_div1_div1_div1_div2{
        /* border: 1px solid red; */
        height: 15px;
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
    }

    #app_div1_div1_div1_div2>span{
        margin: 0px 5px;
    }

    #app_div1_div1_div2{
        width: 100%;
        min-height: 500px;
        display: flex;
    }

    #app_div1_div1_div3{
        width: 100%;
        min-height: 50px;
        border-bottom: 1px solid rgb(229,233,240);
        display: flex;
        align-items: center;
    }

    #app_div1_div1_div3>i{
        font-size: 25px;
        margin-right: 10px;
    }

    #app_div1_div1_div2>video{
        width: 100%;
    }

    #app_div1_div2{
        width: 25%;
        /* border: 1px solid red; */
        display: flex;
        justify-content: center;
    }

    #app_div1_div2_div1{
        width: 85%;
        /* border: 1px solid red; */
        height: 80px;
        display: flex;
        justify-content: space-between;
    }

    #app_div1_div2_div1_div1{
        width: 20%;
        /* border: 1px solid red;        */
    }

    #app_div1_div2_div1_div2{
        width: 75%;
        /* border: 1px solid red;      */
    }

    #app_div1_div2_div1_div2_div1{
        width: 100%;
        /* border: 1px solid red; */
        height: 30px;
        display: flex;
        align-items: center;
        color: #FB7299;
        font-size: 14px;
    }

    #app_div1_div2_div1_div2_div2{
        width: 100%;
        /* border: 1px solid red; */
        height: 15px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #app_div1_div2_div1_div2_div3{
        width: 100%;
        /* border: 1px solid red; */
        height: 25px;
        display: flex;
        align-items: center;
        margin-top: 5px
    }

    #app_div1_div2_div1_div2_div3>button{
        width: 50%;
        background: #00a1d6;
        color: white;
        border: #00a1d6 2px solid;
    }

</style>

<body>
<div id="app">

    <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
        </el-menu-item>
        <el-menu-item index="1">
            <a href="/videoWeb/fronts/index.html">
                <i class="el-icon-s-home"></i>主页
            </a>
        </el-menu-item>
        <el-menu-item index="2">实战课</el-menu-item>
        <el-menu-item index="3">体系课</el-menu-item>
        <el-menu-item index="4"><a href="" target="_blank">手记</a></el-menu-item>
        <el-menu-item >
            <el-input placeholder="请输入关键字" v-model="input" clearable style="width:250px"></el-input>
            <el-button size="medium" icon="el-icon-search"></el-button>
        </el-menu-item>

        <el-menu-item style="float: right;" v-if="code != 100">
            <a href="">注册</a>
            /
            <a href="login.html">登录</a>
        </el-menu-item>

        <el-submenu index="5" style="float: right;" v-if="code === 100">
            <template slot="title">
                <div class="demo-type" style="display:inline-block">
                    <div>
                        <el-avatar :src="imgSrc"></el-avatar>
                    </div>
                </div>
            </template>
            <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
            <el-menu-item index="5-2">
                <a href="/videoWeb/fronts/myHead.html">
                    <i class="el-icon-user"></i>
                    个人中心
                </a>
            </el-menu-item>
            <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-submenu>

        <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

    </el-menu>

    <div id="app_div1">
        <div id="app_div1_div1">
            <div id="app_div1_div1_div1">
                <div id="app_div1_div1_div1_div1">{{videoTitle}}</div>
                <div id="app_div1_div1_div1_div2">{{videoView}}<span>播放</span>{{createTime}}</div>
            </div>

            <div id="app_div1_div1_div2">
                <video :src="videoSrc" controls="controls"></video>
            </div>

            <div id="app_div1_div1_div3">
                <i class="layui-icon layui-icon-praise"></i>122
                &nbsp;&nbsp;&nbsp;&nbsp;
                <i class="layui-icon layui-icon-star"></i>323
            </div>

        </div>

        <div id="app_div1_div2">
            <div id="app_div1_div2_div1">
                <div id="app_div1_div2_div1_div1">
                    <img :src="videoAuthorHeadImg" style="width: 60px;height: 60px;border-radius: 50%;">
                </div>
                <div id="app_div1_div2_div1_div2">
                    <div id="app_div1_div2_div1_div2_div1">{{authorName}}</div>
                    <div id="app_div1_div2_div1_div2_div2">VX18606862816 来py另低价回收电脑本人没有淘</div>
                    <div id="app_div1_div2_div1_div2_div3">
                        <button><i class="el-icon-plus"></i>关注 66.7万</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            code:1,//登录状态
            name:"",//姓名
            imgSrc:'',//头像
            id:0,//用户id
            videoSrc:'',
            videoTitle:'',
            createTime:'',
            authorName:'',
            videoView:0,
            videoAuthorHeadImg:'',//视频作者头像
        },
        mounted:function (){
            this.login();
            this.getVideoDetails();
        },
        methods:{
            login:function(){//获取登录token信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                        }
                        if(res.code == 401){
                            location.href="../../../../fronts/login.html";
                        }
                    }
                })
            },
            getUrlParam: function (name) {//获取url中的参数
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null)
                    return unescape(r[2]);
                return null; //返回参数值
            },
            getVideoDetails:function(){
                var videoId = this.getUrlParam('videoId');
                var that = this;
                axios.get("/videoWeb/getVideoDetails?id="+videoId,
                    {
                        headers:{
                            Authorization:localStorage.Authorization,
                        },
                    }).then(
                    function(res){
                        that.videoSrc = res.data.videoSrc;
                        that.videoTitle = res.data.videoTitle;
                        that.createTime = res.data.createTime;
                        that.authorName = res.data.username;
                        that.videoView = res.data.videoView;
                        that.videoAuthorHeadImg = res.data.headImg;
                    },
                    function(error){

                    }
                );
            },
        },
    })
</script>

</html>
